import React from 'react';
import { inject, observer } from 'mobx-react';
import { Button } from 'antd';
import { WeaDialog, WeaInputSearch, WeaLocaleProvider } from 'ecCom';
import { WeaTableNew } from 'comsMobx';
import * as dialogTypes from '../../../constants/OdocCompsDialogType';
import * as mobx from 'mobx';

const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;

@inject('odocRequestStore', 'odocCompsStore')
@observer
class Main extends React.Component {
  constructor(props) {
    super(props);
    this.closeDialog = this.closeDialog.bind(this);
    this.onSearch = this.onSearch.bind(this);
    this.onRowClick = this.onRowClick.bind(this);
    this.getColumnsCustom = this.getColumnsCustom.bind(this);
  }

  componentWillMount() {
    this.getTableList();
  }


  componentWillReceiveProps(nextProps) {
    if (this.props.visible != nextProps.visible && nextProps.visible) {
      this.getTableList();
    }
  }

  getTableList() {
    const { workflowid, odocRequestStore, odocCompsStore } = this.props;
    let { requestParam } = odocCompsStore;
    requestParam = mobx.toJS(requestParam);
    delete requestParam.markInfo;
    odocRequestStore.getTableList({ workflowid, ...requestParam });
  }

  closeDialog() {
    const { odocRequestStore } = this.props;

    odocRequestStore.controlDialogVisible(dialogTypes.SELECT_DIRECTION_DIALOG, false);
    odocRequestStore.resetTableStore();
  }

  onRowClick(record) {
    const { onSelect } = this.props;
    onSelect && onSelect(record);

    // 关闭窗口
    this.closeDialog();
  }

  onSearch(directname) {
    const { workflowid, odocRequestStore, odocCompsStore } = this.props;
    let { requestParam } = odocCompsStore;
    requestParam = mobx.toJS(requestParam);
    delete requestParam.markInfo;
    odocRequestStore.getTableList({ workflowid, directname, ...requestParam });
  }


  getColumnsCustom(columns) {
    return columns.map(col => ({
      ...col,
      className: 'customWrap', // 自动换行
    }));
  }

  render() {
    const { odocRequestStore, visible } = this.props;
    const { tableStore } = odocRequestStore;
    const title = getLabel(512917, '选择常用去向');
    const height = 600;
    const style = { width: 800, height };
    const onCancel = this.closeDialog;
    const buttons = [
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@fc8x56@cancel`} onClick={this.closeDialog}>{getLabel(31129, '取消')}</Button>),
    ];

    const dialogParams = { title, style, visible, onCancel, buttons };

    return (
      <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@aj2yii`} {...dialogParams}>
        <div className="odoc-select-dialog">
          <div className="search">
            <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@8kwytn`} onSearch={this.onSearch} />
          </div>
          <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@gd866l`}
            outerHeight={height}
            pageAutoWrap={true}
            needScroll={true}
            onRowClick={this.onRowClick}
            needRowClick={true}
            getColumns={this.getColumnsCustom}
            comsWeaTableStore={tableStore}
          />
        </div>
      </WeaDialog>
    );
  }
}

export default Main;
